<template>
	<view class="container flex-column-center">
		<div class="avator"></div>
		<span class="title">数字化实验室</span>
		<div class="input-box flex-box i-1" :class="{active:focus==='name'}">
			<image :src="focus==='name'?require('@/static/imgs/name_selected.png'):require('../../static/imgs/name.png')" alt="">
			<input @focus="focus='name'" @blur="focus=''" v-model="name" type="text" placeholder="请输入手机号/用户名">
		</div>
		<div class="input-box flex-box" :class="{active:focus==='psw'}">
			<image :src="focus==='psw'?require('../../static/imgs/psw_selected.png'):require('../../static/imgs/psw.png')" alt="">
			<input @focus="focus='psw'" @blur="focus=''" v-model="password" type="password" placeholder="请输入密码">
		</div>
		<div class="btn" @click="loginClick">登录</div>
	</view>
</template>

<script>
	import{request} from '@/utils/http.js'
	export default {
		name:'login',
		data() {
			return {
				name:'',
				focus:'',
				password:'',
			}
		},
		methods: {
			loginClick(){
				if(this.name===''){
					uni.showToast({
						icon:'none',
						title: '请输入手机号/用户名',
						duration: 2000
					});
					return
				}
		
				if(this.password===''){
					uni.showToast({
						icon:'none',
						title: '请输入密码',
						duration: 2000
					});
					return
				}
				const data = {
					grantType:'password',
					tenantId:'000000',
					account:this.name,
					password:this.password
				}
				uni.showLoading({
					title: '加载中'
				});
				request('/blade-auth/token','post',data).then(res=>{

					uni.setStorageSync('token',res.accessToken);
					uni.setStorageSync('user',res)
					uni.hideLoading();
					uni.redirectTo({
						url:'/pages/laboratory/index'
					})
				}).catch(err=>{
					uni.hideLoading();
					uni.showToast({
						icon:'none',
						title:err,
						duration: 2000
					});
		
				})
				
			}
		},
		mounted() {
			
			
		}
	
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		background: url('../../static/imgs/login-bg.png')no-repeat;
		background-size: 100% 100%;
		.avator{
			width: 192upx;
			height: 192upx;
			background: rgba(255,255,255,0.5);
			box-shadow: 0upx 18upx 61upx 7upx rgba(50,124,206,0.09);
			border-radius: 64upx;
			margin-top: 170upx;
		}
		.title{
			color: #293F66;
			font-size: 50upx;
			font-weight: bold;
			margin-top: 50upx;
		}
		.i-1{
			margin-top: 145upx;
		}
		.input-box{
			width: 531upx;
			height: 88upx;
			background: #F5F9FF;
			border-radius: 44upx;
			padding: 0 44upx;
			&.active{
				outline: 2px solid #478BFF;
			}
			input{
				font-size:32upx;
			}
			image{
				width: 27upx;
				height: 30upx;
				margin-right: 25upx;
			}
		}
		.input-box+.input-box{
			margin-top: 67upx;
		}
		.btn{
			width: 531upx;
			height: 88upx;
			background: linear-gradient(69deg, #478BFF 0%, #58BEFF 100%);
			border-radius: 44upx;
			color: #fff;
			font-size: 36upx;
			text-align: center;
			line-height: 88upx;
			margin-top: 270upx;
			font-weight: bold;
		}
	}
</style>
